<template>
    <el-descriptions title="商品规格"
                     :column="1"
                     border
                     class="mb20 mi_descriptions">
        <el-descriptions-item
            v-for="(vo, i) in spec.list"
            :label="vo.title"
        >
            <el-space wrap>
                <el-tag v-for="(voo,j) in vo.values" :key="j" effect="plain" type="warning" closable @close="removeAttrValue(i,j)">{{ voo.value }}</el-tag>
                <mi-input v-model="spec.valueInput[i]" size="small" />
                <el-button @click="addSpecValue(i)" size="small">添加</el-button>
            </el-space>
        </el-descriptions-item>
    </el-descriptions>


    <div class="mb20">
        <div v-if="!spec.showAddSpec">
            <el-button type="primary" @click="toggleAttForm">添加新规格</el-button>
            <el-button type="success" @click="makeSkus">生成规格</el-button>
        </div>

        <div v-else>
            <el-form :inline="true" :model="spec.addForm" :rules="spec.addFormRules" ref="specFormRef">
                <el-form-item label="规格名称" prop="title">
                    <mi-input v-model="spec.addForm.title" />
                </el-form-item>
                <el-form-item label="规格值" prop="value">
                    <mi-input v-model="spec.addForm.value" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addSpec">确定</el-button>
                    <el-button @click="toggleAttForm">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">

import {getCurrentInstance, inject, markRaw, reactive, Ref, ref} from "vue";
import tool from "@/utils/tool";
import {FormInstance} from "element-plus";
import Edit from "@/model/edit";

import {makeGoodsSkus} from "@/service/goodsService";
const {proxy} = getCurrentInstance() as any

const spec:any = reactive({
    list: [],
    showAddSpec:false,
    valueInput:[],
    addForm:{
        title:'', value:'',
    },
    addFormRules: {
        title: {required: true, message: '请填写规格名称'},
        value: {required: true, message: '请填写规格值'},
    },
    // skus:[],
})
const specFormRef = ref<FormInstance>()
const edit: Edit = inject('edit', new Edit({}))

// 将响应式规格数据转为组件内的局部数据，防止父组件即时响应
spec.list = edit.info.specs ? tool.deepVal(edit.info.specs) : []
// spec.skus = edit.info.skus ? tool.deepVal(edit.info.skus) : []

const addSpecValue = (index:number) => { // 将属性值添加到对应的属性中
    const value = spec.valueInput[index]    // 当前输入框的值
    const length = spec.list[index].values.length // 获取数组的长度作为虚拟id
    spec.list[index].values.push({
        vir_id: `_${length}`,
        value: value,
    })
    // 清空输入框数据
    spec.valueInput[index] = ''
}

const toggleAttForm = () => {
    if (spec.showAddSpec){  // 隐藏
        spec.addForm.title = ''
        spec.addForm.value = ''
    }
    spec.showAddSpec = !spec.showAddSpec
}

const makeSkus = () => {
    proxy.$confirm(
        '生成规格将清空现有规格数据，是否继续？',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then((res:any)=>{
            // 规格
            edit.info.specs = spec.list ? tool.deepVal(spec.list) : []
            // 商品sku
            edit.info.skus = makeGoodsSkus(spec.list)

        })
        .catch((err:any)=>{

        })
}

/**
 * 添加规格
 */
const addSpec = () => {
    specFormRef.value?.validate((valid, fields) => {
        if(valid){
            const length = spec.list.length
            // 验证通过，添加属性，并清空表单数据，隐藏表单
            spec.list.push({
                vir_id:`vir_${length}`, // 添加虚拟id，用前缀防止和id冲突
                title:spec.addForm.title,
                values:[{
                    vir_id: 'vir_0',
                    value: spec.addForm.value
                }]
            })
            // 隐藏表单，并清空表单数据
            toggleAttForm()
        }else{
            return
        }
    })
}

// 删除规格属性值
const removeAttrValue = (index: any, vIndex: any) => {
    // 删除属性值
    spec.list[index].values.splice(vIndex, 1)
    // 如果当前属性只剩最后一个值，删除当前行
    if (spec.list[index].values.length == 0){
        spec.list.splice(index,1)
    }
}


</script>

<style scoped>

</style>
